<template>
	<view class="content" v-if="isShow" @click.stop="isShow=false">
		<canvas @click.stop="" :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="my-canvas"></canvas>
		<!-- #ifdef MP-WEIXIN || APP-PLUS -->
		<view class="save-btn" @click.stop="saveImage">保存图片</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="save-btn" @click.stop="saveImage">长按保存图片</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default{
		props:{
			headerImg:{
				type: String,
				default: ''
			},
			title:{
				type: String,
				default: ''
			},
			subTitle:{
				type: String,
				default: ''
			},
			price:{
				type: Number,
				default: 0
			},
			primary_price:{
				type: Number,
				default: 0
			},
			abImg:{
				type: String,
				default: 'https://cos.ryz1620.com/liankun/static/IMG1653.png'
			},
			topImg:{
				type: String,
				default: 'https://cos.ryz1620.com/liankun/static/IMG99.png'
			}
		},
		data(){
			return {
				canvasW: 0,
				canvasH: 0,
				ctx: null,
				isShow: false,
				qrcode: '',
			}
		},
		methods:{
			//显示
			showCanvas(qrcode){
				this.isShow = true
				this.qrcode = qrcode
				this.__init()
			},
			//初始化画布
			async __init(){
				let that = this
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				that.ctx = uni.createCanvasContext('my-canvas',this)
				that.canvasW = uni.upx2px(550);
				that.canvasH = uni.upx2px(780);
				//设置画布背景透明
				that.ctx.setFillStyle('rgba(255, 255, 255, 0)')
				//设置画布大小
				that.ctx.fillRect(0,0,that.canvasW,that.canvasH)
				//绘制圆角背景
				that.drawRoundRect(that.ctx, 0, 0, that.canvasW, that.canvasH,uni.upx2px(18),'#FFFFFF')
				// 头部图片
				let BottomtopImg = await that.getImageInfo(that.topImg)
				let hWs = uni.upx2px(500);
				let hHs = uni.upx2px(36);
				that.drawRoundImg(that.ctx,BottomtopImg.path,(((that.canvasW-hWs) / 2)  + uni.upx2px(100)),((that.canvasW-hWs) / 2),uni.upx2px(300) ,hHs,uni.upx2px(14))	
				//获取标题图片
				let headerImg = await that.getImageInfo(that.headerImg)
				let hW = uni.upx2px(500);
				let hH = uni.upx2px(400);
				//绘制标题图
				that.drawRoundImg(that.ctx,headerImg.path,((that.canvasW-hW) / 2),((that.canvasW-hW) / 2) + uni.upx2px(50),hW,hH,uni.upx2px(14))	
				//绘制价格
				that.ctx.setFontSize(14);
				that.ctx.setFillStyle('#f54545');
				that.ctx.fillText('￥',((that.canvasW-hW) / 2),(
				((that.canvasW-hW) / 2) + hH + uni.upx2px(110)))
				that.ctx.setFontSize(20);
				that.ctx.fillText(that.price,(((that.canvasW-hW) / 2) + uni.upx2px(30)),(
				((that.canvasW-hW) / 2) + hH + uni.upx2px(110)))
				// //绘制市场价格
				// let wxidth = that.ctx.measureText(that.price).width
				// that.ctx.setFontSize(10);
				// that.ctx.setFillStyle('#999');
				// that.ctx.fillText('￥',(((that.canvasW-hW) / 2)+ uni.upx2px(wxidth+95)),(
				// ((that.canvasW-hW) / 2) + hH + uni.upx2px(110)))
				// that.ctx.setFontSize(14);
				// that.ctx.fillText(that.primary_price,(((that.canvasW-hW) / 2) + uni.upx2px(wxidth+115)),(
				// ((that.canvasW-hW) / 2) + hH + uni.upx2px(110)))
				// // 市场价删除线
				// that.drawDashLine(that.ctx,uni.upx2px(wxidth+115),(((that.canvasW-hW) / 2) + hH + uni.upx2px(100)),(that.canvasW-uni.upx2px(380-2*wxidth)),(((that.canvasW-hW) / 2) + hH + uni.upx2px(100)),8)
				//绘制标题
				that.ctx.setFontSize(14); //设置标题字体大小
				that.ctx.setFillStyle('#333'); //设置标题文本颜色
				// that.ctx.fillText(that.title,((that.canvasW-hW) / 2),(
				// ((that.canvasW-hW) / 2) + hH + uni.upx2px(110)))
				let sidth = that.ctx.measureText(that.title).width
				if(sidth > hW){
					that.ctx.fillText(that.title.slice(0,15) + '...',((that.canvasW-hW) / 2),(
					((that.canvasW-hW) / 2) + hH + uni.upx2px(160)))
				}else{
					that.ctx.fillText(that.title,((that.canvasW-hW) / 2),(
					((that.canvasW-hW) / 2) + hH + uni.upx2px(160)))
				}
				//绘制副标题
				// that.ctx.setFontSize(14);
				// that.ctx.setFillStyle('#858585');
				// let sWidth = that.ctx.measureText(that.subTitle).width
				// if(sWidth > hW){
				// 	that.ctx.fillText(that.subTitle.slice(0,17) + '...',((that.canvasW-hW) / 2),(
				// 	((that.canvasW-hW) / 2) + hH + uni.upx2px(180)))
				// }else{
				// 	that.ctx.fillText(that.subTitle,((that.canvasW-hW) / 2),(
				// 	((that.canvasW-hW) / 2) + hH + uni.upx2px(180)))
				// }
				//绘制虚线
				// that.drawDashLine(that.ctx,uni.upx2px(20),(((that.canvasW-hW) / 2) + hH + uni.upx2px(240)),(that.canvasW-uni.upx2px(20)),(((that.canvasW-hW) / 2) + hH + uni.upx2px(240)),5)
				// //左边实心圆
				// that.drawEmptyRound(that.ctx,0,(((that.canvasW-hW) / 2) + hH + uni.upx2px(240)),uni.upx2px(20))
				// //右边实心圆
				// that.drawEmptyRound(that.ctx,that.canvasW,(((that.canvasW-hW) / 2) + hH + uni.upx2px(240)),uni.upx2px(20))
				// //提示文案
				// that.ctx.setFontSize(12);
				// that.ctx.setFillStyle('#858585');
				// that.ctx.fillText('“联坤家居”小程序',(((that.canvasW-hW) / 2) + uni.upx2px(34)),(((that.canvasW-hW) / 2) + hH + uni.upx2px(300)))
				//底部广告
				let BottomAdImg = await that.getImageInfo(that.abImg)
				that.ctx.drawImage(BottomAdImg.path,(((that.canvasW-hW) / 2)),(((that.canvasW-hW) / 2) + hH + uni.upx2px(220)),uni.upx2px(365),uni.upx2px(110))
				//小程序码
				let qrcodeImg = await that.getImageInfo(that.qrcode)
				that.ctx.drawImage(qrcodeImg.path,uni.upx2px(410),(((that.canvasW-hW) / 2) + hH + uni.upx2px(210)), uni.upx2px(120), uni.upx2px(120))
				//延迟渲染
				setTimeout(()=>{
					that.ctx.draw(true,()=>{
						uni.hideLoading()
					})
				},500)
			},
			//绘制实心圆
			drawEmptyRound(ctx,x,y,radius){
				ctx.save()
				ctx.beginPath();
				ctx.arc(x, y, radius, 0, 2 * Math.PI,true);
				ctx.setFillStyle('rgba(0, 0, 0, .4)')
				ctx.fill();
				ctx.restore()
				ctx.closePath()
			},
			//绘制虚线
			drawDashLine(ctx,x1,y1,x2,y2,dashLength){
				ctx.setStrokeStyle("#cccccc")//设置线条的颜色
				ctx.setLineWidth(1)//设置线条宽度
				var dashLen = dashLength,
				xpos = x2 - x1, //得到横向的宽度;
				ypos = y2 - y1, //得到纵向的高度;
				numDashes = Math.floor(Math.sqrt(xpos * xpos + ypos * ypos) / dashLen); 
				//利用正切获取斜边的长度除以虚线长度，得到要分为多少段;
				for(var i=0; i<numDashes; i++){
				 if(i % 2 === 0){
					 ctx.moveTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i); 
					 //有了横向宽度和多少段，得出每一段是多长，起点 + 每段长度 * i = 要绘制的起点；
				  }else{
					  ctx.lineTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i);
				  }
				}
				ctx.stroke();
			},
			//带圆角图片
			drawRoundImg(ctx, img, x, y, width, height, radius){
				ctx.beginPath()
				ctx.save()
				// 左上角
				ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5)
				// 右上角
				ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2)
				// 右下角
				ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5)
				// 左下角
				ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI)
				ctx.stroke()
				ctx.clip()
				ctx.drawImage(img, x, y, width, height);
				ctx.restore()
				ctx.closePath()
			},
			//圆角矩形
			drawRoundRect(ctx, x, y, width, height, radius, color){
				ctx.save();
				ctx.beginPath();
				ctx.setFillStyle(color); 
				ctx.setStrokeStyle(color)
				ctx.setLineJoin('round');  //交点设置成圆角
				ctx.setLineWidth(radius);
				ctx.strokeRect(x + radius/2, y + radius/2, width - radius , height - radius );
				ctx.fillRect(x + radius, y + radius, width - radius * 2, height - radius * 2);
				ctx.stroke();
				ctx.closePath();
			},
			//获取图片
			getImageInfo(imgSrc){
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: imgSrc,
						success: (image) => {
							resolve(image);
							console.log('获取图片成功',image)
						},
						fail: (err) => {
							reject(err);
							console.log('获取图片失败',err)
						}
					});
				});
			},
			//保存图片到相册
			saveImage(){
				//判断用户授权
				// #ifdef  MP-WEIXIN || MP-TOUTIAO
				uni.getSetting({
				   success(res) {
				      console.log('获取用户权限',res.authSetting)
					  if(Object.keys(res.authSetting).length>0){
						  //判断是否有相册权限
						  if(res.authSetting['scope.writePhotosAlbum']==undefined){
							  //打开设置权限
							  // uni.openSetting({
							  //   success(res) {
							  //     console.log('设置权限',res.authSetting)
							  //   }
							  // })
							  
							  
							  uni.authorize({
								  scope: 'scope.writePhotosAlbum',
								  success: (res) => {
								   //用户同意授权
								   console.log('2222')
								   console.log(res)
								   // that._saveImg()
								   // console.log(res)
								  }
							  })
						  }else{
							  if(!res.authSetting['scope.writePhotosAlbum']){
								  //打开设置权限
								  // uni.openSetting({
								  //   success(res) {
								  //     console.log('设置权限',res.authSetting)
								  //   }
								  // })
								  uni.authorize({
									  scope: 'scope.writePhotosAlbum',
									  success: (res) => {
									   //用户同意授权
									   console.log('2222')
									   console.log(res)
									   // that._saveImg()
									   // console.log(res)
									  }
								  })
							  }
						  }
					  }else{
						  return
					  }
				   }
				})
				// #endif
				
				var that = this
				uni.canvasToTempFilePath({
					canvasId: 'my-canvas',
					quality: 1,
					complete: (res) => {
						 console.log(res.tempFilePath)
						console.log('保存到相册',res);
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								uni.showToast({
									title: '已保存到相册',
									icon: 'success',
									duration: 2000
								})
								setTimeout(()=>{
									that.isShow = false
								},2000)
							}
						})
					}
				},this);
			}
		}
	}
</script>

<style scoped lang="scss">
.content{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,.7);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 999;
	.save-btn{
		margin-top: 35rpx;
		color: #FFFFFF;
		background: linear-gradient(to right, #FE726B , #FE956B);
		padding: 15rpx 40rpx;
		border-radius: 50rpx;
	}
}
</style>
